<template>
	<view class="updatePage">
		<view v-if="title==='手机号'" class="title">
			{{title}}变更
		</view>
		<view v-else class="title">
			设置{{title}}
		</view>
		<view class="inputBorder" style="border: none;">
			<view class="" style="">
				<uni-easyinput :disabled="true" style="border: none;flex:6;margin-bottom: 20rpx;" :type="type" :placeholder="'请输入'+title" 
					v-model="UserPhone"></uni-easyinput>
				<uni-easyinput style="border: none;flex:6" :type="type" :placeholder="'请输入新'+title"
					v-model="Phone"></uni-easyinput>
				<view  style="display: flex;justify-content: space-between;margin-top:20rpx;align-items: center;">
					<uni-easyinput style="border: none;flex:6" :type="type" placeholder="请输入验证码"
						v-model="code"></uni-easyinput>
						<view style="flex: 4;text-align: right;" >
							<uni-tag type="primary" :text="!codeTime?'获取验证码':codeTime+'s后重发'" @click="codeChange"></uni-tag>
						</view>
				</view>
				
			</view>
			
		</view>
		<view class="fixBtn">
			<button @click="finsh" type="primary" :loading="loading">完成</button>
		</view>
	</view>
</template>

<script>
	import {
		regPhone,
		regIdCard
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				loading:false,
				// 旧手机号
				UserPhone:"",
				// 新手机号
				Phone:"",
				code:"",
				codeTime: 0,
				type: '',
				title: '',
				key: '',
				userName: '',
				userPhone: ''
			}
		},
		onLoad(options) {
			console.log('edituserinfo页面==', options)
			this.UserPhone = options.Phone
			this.type = options.type
			this.title = options.title
			this.key = options.key
		},
		methods: {
			// 用户信息
			op() {
				this.$http('post', '/Base_Manage/Home/GetCusOperatorInfo').then(res => {
					if (res.Success) {
						console.log('edituser获取用户信息',res)
						uni.setStorageSync('userInfo', res.Data.UserInfo)
					}
				})
			},
			codeChange(){
				
				if(this.Phone==="") return this.$api.msg('请输入新手机号')
				// if(this.code === "") return this.$api.msg('请输入验证码')
				
				console.log('手机号', this.UserPhone,this.Phone)
				uni.showLoading({
					title:'发送中'
				})
				this.$http('post', '/BO/CustomerinfoMerchant/ReplacePhone?UserPhone='+this.UserPhone + '&Phone='+this.Phone).then(res => {
					if (res.Success) {
						uni.hideLoading()
						// this.op()
						uni.showToast({
							icon: 'none',
							title: '已发送'
						})
						if (this.codeTime > 0) {
							uni.showToast({
								title: '不能重复获取',
								icon: "none"
							});
							return;
						} else {
							this.codeTime = 60
							let timer = setInterval(() => {
								this.codeTime--;
								console.log('获取递减', this.codeTime)
								if (this.codeTime < 1) {
									clearInterval(timer);
									this.codeTime = 0
								}
							}, 1000)
						}
						
						// this.back()
					}else{
						this.$api.msg(res.Msg)
					}
				})
			},
			// 完成
			finsh() {
				if(this.Phone==="") return this.$api.msg('请输入新手机号')
				if(this.code==="") return this.$api.msg('请输入验证码')
				this.loading=true
				uni.showLoading({
					title:'变更中'
				})
				this.$http('post', '/BO/CustomerinfoMerchant/ConfirmPhone?SmsCode='+this.code +'&UserPhone='+this.UserPhone + '&Phone='+this.Phone).then(res => {
					if (res.Success) {
						this.op()
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '手机号已变更'
						})
						this.back()
						this.loading=false
					}else{
						this.loading=false
						this.$api.msg(res.Msg)
					}
				})
				// let userInfo = uni.getStorageSync('userInfo')
				// if (this.key == 'UserName') userInfo.RealName = this.value
				// userInfo[this.key] = this.value
				// if (this.title == '手机号' && !regPhone.test(this.value)) return this.$api.msg('请输入正确的手机号')
				// if (this.title == '身份证号' && !regIdCard.test(this.value)) return this.$api.msg('请输入正确的身份证号')
				// this.saveData(userInfo)
			},
			saveData(userInfo) {
				// if(this.Phone==="") return this.$api.msg('请输入新手机号')
				// if(this.code==="") return this.$api.msg('请输入验证码')
				// this.$http('post', '/BO/CustomerinfoMerchant/ConfirmPhone?SmsCode='+this.code).then(res => {
				// 	if (res.Success) {
				// 		this.op()
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '手机号已变更'
				// 		})
				// 		this.back()
				// 	}
				// })
			},
			back() {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep.uni-easyinput__content-input {
		height: 40px;
	}

	.updatePage {
		box-sizing: border-box;
		height: 100vh;
		padding: 30px;
		background-color: #fff;

		.title {
			font-weight: 500;
			font-size: 24px;
			text-align: center;
			margin-bottom: 10vh;
		}

		.inputBorder {
			height: 40px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}

		.finsh {
			position: absolute;
			bottom: 100px;
			left: 30px;
			width: calc(100% - 60px);
		}

		.fixBtn {
			position: fixed;
			bottom: 40px;
			width: calc(100% - 60px);
			left: 30px;
		}
	}
</style>